<template>
  <div ref="chart" class="echart"></div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    data: {
      type: Array,
      default:function(){
        return []
      }
    },
  },
  data() {
    return {
      fontSize:18,
      padding:false
    };
  },

  methods: {
     ScreenWidth(){
     
          if (screen.width <= 1920){
              this.fontSize=12;
              this.padding=false;
          }else{
             this.fontSize=18;
              this.padding=true;
          }
 },
    drawLine() {
 var that = this;
 this.ScreenWidth();
      const chart = this.$refs.chart;
      var that = this;
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
  
      var color = [["#49afff"], ["#68A54A"], ["#f56c6c"]];

      var demoData = this.data;
      // var demoData =[this.data];
      
      var options = {
        series: (function () {
          var result = [];
          demoData.forEach(function (item) {
            result.push(
              {
                type: "gauge", //内圈线-内侧-底色
                 radius: that.padding?'70%':'90%',
                splitNumber: 10,
                splitLine: {
                  show: false,
                },
                min: 0,
                max: 300,
                startAngle: 225,
                endAngle: -45,
                axisLabel: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 0,
                    shadowBlur: 0,
                    color: [[1, item.bgColor2]],
                  },
                },
                pointer: {
                  show: 0,
                },
                axisTick: {
                  show: false,
                },
                detail: {
                  show: false,
                },
              },
              {
                type: "gauge", //内圈线-内侧-动态线条对应底色线条
                radius:  that.padding?'70%':'90%',
                splitNumber: 10,
                splitLine: {
                  show: false,
                },
                min: 0,
                max: 300,
                startAngle: 225,
                endAngle: -45,
                axisLabel: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 6,
                    shadowBlur: 0,
                    color: [[1, item.bgColor]],
                  },
                },
                pointer: {
                  show: 0,
                },
                axisTick: {
                  show: false,
                },
                detail: {
                  show: false,
                },
              },
               
              {
                type: "gauge",
                 radius:  that.padding?'70%':'90%',
                splitNumber: 10,
                splitLine: {
                  show: false,
                },
                min: 0,
                max: 300,
                startAngle: 225,
                endAngle: -45,
                axisLabel: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 24,
                    shadowBlur: 0,
                    color: [[item.aqi / 300, item.airLevelColor]],
                  },
                },
                pointer: {
                  show: 0,
                },
                axisTick: {
                  show: false,
                },

                detail: {
                  
                        offsetCenter: [1, '1%'],
                        textStyle: {
                            fontSize: that.fontSize,
                            color: '#0AFCE0'
                        },
                         rich: {
                            a: {
                                color: '#fff',
                                fontSize: that.fontSize,
                                
                            },
                            b: {
                                  fontSize:that.fontSize,
                                 color: '#fff',
                                
                            },
                            c: {
                                color: item.airLevelColor,
                                fontSize:  that.fontSize,
                                 height:that.padding?39:24,
                                lineHeight: that.padding?39:24,
                            },
                            d: {
                                fontSize: that.fontSize,
                                width: 60,
                                height: that.padding?39:20,
                                lineHeight: that.padding?39:20,
                                color: '#fff',
                                backgroundColor: item.airLevelColor,
                                borderWidth: 1,
                                borderRadius: 4
                            },
                            e: {
                                padding:that.padding?[100, 0, 50, 0]:[10,0,10,0],
                                fontSize: that.padding?18:14,
                                color: '#ffffff',
                                lineHeight: that.padding?0:20,
                                fontWeight: '100',
                            },
                           
                        },
                    formatter: [
                     
                            '{a|' + item.primaryPollutant + '}', 
                            '{b|' + item.name + '}',
                            '{c|' + (item.none?item.aqi:'') + '}',
                            '{d|' + item.airLevelName + '}',
                            '{e|'+item.title+'}',
                        ].join('\n'),
             
                },
                data: [
                  {},
                ],
              },
              {
                type: "gauge", //外圈线
                radius:  that.padding?'80%':'100%',
                splitNumber: 10,
                splitLine: {
                  show: false,
                },
                min: 0,
                max: 300,
                startAngle: 225,
                endAngle: -45,
                axisLabel: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 10,
                    shadowBlur: 0,
                    color: [
             
                      [1, item.airLevelColor],
                    ],
                  },
                },
                pointer: {
                  show: 0,
                },
                axisTick: {
                  show: false,
                },
                detail: {
                  show: false,
                },
              }
            );
          });
          return result;
        })(),
      };

      // 绘制图表
      options && myChart.setOption(options);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
    
    this.drawLine();
  },
};
</script>
<style lang="less" scoped>
.echart {
  width: 100%;
  height: 100%;
}
.font {
  font-size: 0.313vw;
  color: white;
}
</style>
